<template>
  <div class="car">
    <div class="container">
      <div class="con">
        <div class="own">
          <div class="img">
            <img src alt />
          </div>
          <h3>个人信息</h3>
          <div class="left ownLeft">
            <p v-show="data.name">姓名：{{ data.name }}</p>
            <br />
            <p>曾用名：{{ personal.usedname }}</p>
            <br />
            <p>性别：{{ data.gender }}</p>
            <br />
            <p>籍贯：{{ personal.native }}</p>
            <br />
            <p>户籍所在地：{{ personal.registered }}</p>
            <br />
            <p v-show="data.address">住址：{{ data.address }}</p>
            <br />
          </div>
          <div class="mid ownMid">
            <p v-show="data.number">身份证号码：{{ data.number }}</p>
            <p v-show="data.idcard">身份证号码：{{ data.idcard }}</p>
            <br />
            <p>法名：{{ personal.legalname }}</p>
            <br />
            <p v-show="data.nation">名族：{{ data.nation }}</p>
            <br />
            <p>文化程度：{{ personal.education }}</p>
            <br />
          </div>
          <div class="right ownRight">
            <p>出生日期：{{ personal.birth }}</p>
            <br />
            <p>邮编：{{ personal.postcode }}</p>
            <br />
          </div>
          <br />
          <br />
          <br />
          <br />
          <br />
          <br />
        </div>
        <div class="temple" v-show="monk" style="margin-bottom: 1.041667rem">
          <h3>所属寺庙信息</h3>
          <div class="left templeLeft">
            <p>所属寺庙：{{ belong.shrine }}</p>
            <br />
            <p>获取学位，寺，院名称：{{ belong.degree }}</p>
            <br />
            <p>教职身份：{{ belong.identity }}</p>
            <br />
            <p>寺内职务：{{ belong.templeposition }}</p>
            <br />
            <p>受戒情况：{{ belong.disciplined }}</p>
            <br />
          </div>
          <div class="mid templeMid">
            <p>所属教派：{{ belong.sects }}</p>
            <br />
            <br />
            <p>教内职务：{{ belong.post }}</p>
            <br />
            <p>联系电话：{{ belong.telephone }}</p>
            <br />
            <p>受戒时间：{{ belong.disciplined }}</p>
            <br />
          </div>
          <div class="right templeRight" style="float: left">
            <p>入寺时间：{{ belong.templetime }}</p>
            <br />
            <br />
            <p>教职人员证号：{{ belong.certificate }}</p>
            <br />
            <p>所属扎仓：{{ belong.dratsang }}</p>
            <br />
            <p>受戒经师：{{ belong.teacher }}</p>
            <br />
          </div>
          <div class="rig templeRig" style="float: left">
            <p>宗教学位：{{ belong.religious }}</p>
            <br />
            <br />
            <br />
            <br />
            <p>责任经师：{{ belong.responsibility }}</p>
            <br />
          </div>
          <br />
          <br />
          <br />
          <br />
          <br />
        </div>
        <div class="temple" v-show="zhengbao">
          <h3>重点人员相关信息</h3>
          <div class="left templeLeft">
            <p v-show="data.occupation">职业：{{ data.occupation }}</p>
            <br />
          </div>
          <div class="mid templeMid">
            <p v-show="data.kind">种类：{{ data.kind }}</p>
            <br />
            <br />
          </div>
          <div class="right templeRight" style="float: left">
            <p v-show="data.label">标签：{{ data.label }}</p>
            <br />
            <br />
          </div>
        </div>
        <div class="out">
          <h3>出境回流情况</h3>
          <div class="left outLeft">
            <p>出境方式：{{ exit.exitmode }}</p>
          </div>
          <div class="mid outMid">
            <p>出境时间：{{ exit.exittime }}</p>
          </div>
          <div class="right outRight">
            <p>回流方式：{{ exit.backflowmode }}</p>
          </div>
          <div class="rig outRig">
            <p>回流时间：{{ exit.backflowtime }}</p>
          </div>
          <br />
        </div>
        <div class="Longtext">
          <h3>
            参与培训情况:
            <br />
          </h3>
          <span class="text">
            <p>{{ remarks.train }}</p>
          </span>
        </div>
        <div class="Longtext">
          <h3>个人简历</h3>
          <span class="text">
            <p>{{ remarks.resume }}</p>
          </span>
        </div>
        <div class="social">
          <h3>社会关系</h3>
          <table border="0" width="350">
            <tr>
              <th>称谓</th>
              <th>姓名</th>
              <th>现从事什么职业</th>
              <th></th>
            </tr>
            <tr v-for="(item, index) in socialArr" :key="index">
              <td>{{ item.Appellations }}</td>
              <td>{{ item.Name }}</td>
              <td>{{ item.Occupation }}</td>
              <td class="td">详情</td>
              <th></th>
            </tr>
          </table>
        </div>
        <br />
        <br />
        <br />

        <div class="Longtext">
          <h3>现实表现</h3>
          <span class="text">
            <p>{{ remarks.performance }}</p>
          </span>
        </div>
        <div class="Longtext">
          <h3>参与违法犯罪事件的情况</h3>
          <span class="text">
            <p>{{ remarks.crime }}</p>
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getMonk, getSecpersonnel } from "@/api/data.js";
// import moment from 'moment'

export default {
  name: "PeopleDetails",
  data() {
    return {
      monk: true,
      zhengbao: false,
      data: {},
      socialArr: [],
      remarks: {},
      personal: {},
      belong: {},
      exit: {},
    };
  },
  methods: {
    async getMonk(id) {
      const data = await getMonk(id);
      console.log("data", data);
      this.data = data;
      this.socialArr = data?.remarks?.social ?? [];
      this.remarks = data.remarks;
      this.personal = data.remarks.personal;
      this.belong = data.remarks.belong;
      this.exit = data.remarks.exit;
      // const fmt = moment(new Date(data.createTime * 1)).format('YYYY年MM月DD')
      // console.log(fmt)
    },
    async getSecpersonnel(id) {
      const data = await getSecpersonnel(id);
      // console.log('id', id)
      this.data = data;
      console.log("data", data);
      // this.socialArr = data?.remarks?.social ?? []
      // this.remarks = data.remarks
      // this.personal = data.remarks.personal
      // this.belong = data.remarks.belong
      // this.exit = data.remarks.exit
      // const fmt = moment(new Date(data.createTime * 1)).format('YYYY年MM月DD')
      // console.log(fmt)
    },
  },
  mounted() {
    //  获取id
    const id = this.$route.query.id;
    console.log(id);
    // 获取name
    var name = this.$route.query.name;
    if (name === "僧侣") {
      this.getMonk(id);
    } else if (name === "政保") {
      this.monk = false;
      this.zhengbao = true;
      this.getSecpersonnel(id);
    }
  },
};
</script>

<style scoped>
p {
  margin: 0;
  padding: 0;
}
.container {
  width: 5.208333rem /* 1000/192 */;
  height: 3.328125rem /* 639/192 */;
  /* height: 4.09375rem 786/192; */
  background: rgba(0, 0, 0, 0.2);
  /* margin-left: 100px; */
  margin: 0 auto;
  margin-top: 0.151042rem /* 29/192 */;
  color: #999ba4;
  font-size: 0.072917rem /* 14/192 */;
  line-height: 0.203125rem /* 39/192 */;
  overflow-y: scroll;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
}
::-webkit-scrollbar-track-piece {
  background: rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar {
  width: 2px;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  background-clip: padding-box;
}

.con {
  width: 4.411458rem /* 847/192 */;
  height: 3.802083rem /* 730/192 */;
  margin-top: 0.307292rem /* 59/192 */;
  margin-left: 0.302083rem /* 58/192 */;
  /* background-color: pink; */
}
h3 {
  color: #066ac6;
  font-size: 0.104167rem /* 20/192 */;
  line-height: 0.104167rem /* 20/192 */;
}
.left,
.mid,
.right,
.rig {
  float: left;
  line-height: 0.104167rem /* 20/192 */;
}
.own,
.temple,
.out {
  position: relative;
}
.img {
  width: 0.828125rem /* 159/192 */;
  height: 1.0625rem /* 204/192 */;
  background-color: #fff;
  position: absolute;
  top: 0.234375rem /* 45/192 */;
  right: 0.354167rem /* 68/192 */;
}
.ownMid {
  position: absolute;
  left: 1.098958rem /* 211/192 */;
}
.ownRight {
  position: absolute;
  top: 0.635417rem /* 122/192 */;
  left: 2.255208rem /* 433/192 */;
}
.temple,
.out,
.Longtext,
.social {
  margin-top: 0.208333rem /* 40/192 */;
  margin-bottom: 0.364583rem /* 70/192 */;
}
.templeLeft {
  position: absolute;
}
.templeMid {
  position: absolute;
  left: 1.151042rem /* 221/192 */;
  /* 200/192 */
}
.templeRight {
  position: absolute;
  left: 2.255208rem /* 433/192 */;
}
.templeRig {
  position: absolute;
  left: 3.645833rem /* 700/192 */;
}
.outMid {
  position: absolute;
  left: 1.151042rem /* 221/192 */;
}
.outRight {
  position: absolute;
  left: 2.255208rem /* 433/192 */;
}
.outRig {
  position: absolute;
  left: 3.645833rem /* 700/192 */;
}
.text {
  overflow-wrap: break-word;
}
table {
  float: left;
  border-collapse: separate;
  border-spacing: 0.052083rem /* 10/192 */;
}
table:last-child {
  margin-left: 0.260417rem /* 50/192 */;
}
.td {
  background: #0062cd;
  border-radius: 20%;
  text-align: center;
  color: #fff;
  width: 0.260417rem /* 50/192 */;
}
.car {
  padding-top: 0.260417rem /* 50/192 */;
  background: url("../../images/bg.png") no-repeat;
  width: 10rem;
  background-size: 100% 100%;
  /* background-size: cover; */
  position: fixed;
  height: 100%;
}
</style>
